<template>
  <div class="shuzi">
    <div v-for="x in 7">
      <div v-if="num && dic[num].split(',')[x - 1] == 1"></div>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  num: {
    type: String,
    defalut: 0
  }
})
const showRef = ref(false)

watch(() => props.num, value => {
  showRef.value = !showRef.value
  // // console.log(showRef.value)
})
const dic = {
  ' ':'',
  0: '1,1,1,0,1,1,1',
  1: '0,0,1,0,0,0,1',
  2: '0,1,1,1,1,1,0',
  3: '0,1,1,1,0,1,1',
  4: '1,0,1,1,0,0,1',
  5: '1,1,0,1,0,1,1',
  6: '1,1,0,1,1,1,1',
  7: '0,1,1,0,0,0,1',
  8: '1,1,1,1,1,1,1',
  9: '1,1,1,1,0,1,1',
  // a: '1,1,1,1,1,0,1',
  // a: '1,0,0,1,1,1,1',
  // c: '1,1,0,0,1,1,0',
  // d: '0,0,1,1,1,1,1',
  // e: '1,1,1,1,1,1,0',
  // f: '1,1,0,1,1,0,0',
  // g: '1,1,1,1,0,1,1',
  // h: '1,0,0,1,1,0,1',
  // i: '0,0,1,0,0,0,1',
  // j: '0,0,1,0,1,1,1',
  // k: '1,0,1,1,1,0,1',
}
</script>
<style scoped lang="scss">
.shuzi {
  width: 80px;
  height: 150px;
  position: relative;
  margin-right: 10px;

  >div {
    width: 10px;
    height: 60px;
    position: absolute;
    background-color: #233808;
    border-radius: 5px;

    >div {
      width: 100%;
      height: 100%;
      background-color: #a3fe19;
      border-radius: 5px;
    }

    .active {
      background-color: red;
      transition: background-color 1s linear;
    }
  }

  >div:nth-child(even) {
    width: 60px;
    height: 10px;
  }

  >div:nth-child(1) {
    top: 10px;
  }

  >div:nth-child(2) {
    left: 10px;
  }

  >div:nth-child(3) {
    top: 10px;
    left: 70px;
  }

  >div:nth-child(4) {
    top: 70px;
    left: 10px;
  }

  >div:nth-child(5) {
    top: 80px;
    left: 0px;
  }

  >div:nth-child(6) {
    top: 140px;
    left: 10px;
  }

  >div:nth-child(7) {
    top: 80px;
    left: 70px;
  }
}
</style>
